<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Back Cover</title>
    <style>
body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    background-image:  linear-gradient(#d6f0fa 2px, transparent 2px), linear-gradient(90deg, #d6f0fa 2px, transparent 2px), linear-gradient(#d6f0fa 1px, transparent 1px), linear-gradient(90deg, #d6f0fa 1px, #ffffff 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    background-repeat: repeat;
}

div.content {
    margin: 0;
    padding: 0;
}

div.image {
    background-image: url("{{ imageUrl }}");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    height: 40mm;
    margin-left: 10mm;
    margin-top: 30mm;
    margin-bottom: 10mm;
}

div.title {
    margin-bottom: 10mm;
    padding: 0 10mm;
    font-size: 36px;
    text-align: left;
}

div.description {
    margin-bottom: 10mm;
    padding: 0 10mm;
    font-size: 24px;
    line-height: 36px;
    text-align: left;
}

div.author {
    margin-bottom: 10mm;
    padding: 0 10mm;
    font-size: 24px;
    text-align: left;
}

div.url {
    margin-bottom: 10mm;
    padding: 0 10mm;
    font-size: 24px;
    text-align: left;
}

div.url a {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;;
}

div.version {
    margin-bottom: 10mm;
    padding: 0 10mm;
    font-size: 24px;
    text-align: left;
}

div.version span.version {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;;
}
    </style>
{% include "__i18n__.html" %}
<script>
function documentReady(fn) {
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        setTimeout(fn, 0);
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}
documentReady(function() {
    const lang = '{{ language }}';
    document.querySelectorAll('[data-i18n]').forEach(function(el) {
        let s = el.innerText;
        let t = i18n(s, lang);
        if (s !== t) {
            el.innerText = t;
        }
    });
});
</script>
</head>
<body>
    <div class="content">
        <div class="image"></div>
        <div class="title">{{ title }}</div>
        <div class="description">{{ description }}</div>
        <div class="author"><span data-i18n>Author</span>: {{ author }}</div>
        <div class="version">
            <span data-i18n>Version</span>:
            <span class="version">{{ version }}</span>
        </div>
        <div class="url">
            <span data-i18n>Website</span>:
            <a href="{{ url }}" style="color:rgb(2,132,199); text-decoration:none;">{{ url }}</a>
        </div>
    </div>
</body>
</html>
